<template>
  <el-container>
    <el-header>
      <top-header></top-header>
    </el-header>
    <el-container>
      <el-aside width="260px">
        <left-nav></left-nav>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeIndex" type="card" closable @tab-click="tabClick" @tab-remove="tabRemove">
          <el-tab-pane
            :key="item.to"
            v-for="item in options"
            :label="item.name"
            :name="item.to"
          >
          </el-tab-pane>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.path !== '/index/index'">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-tabs>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!--<el-footer></el-footer>-->
  </el-container>
</template>

<script>
import Vue from 'vue'
import TopHeader from '../components/home/Header'
import LeftNav from '../components/home/LeftNav'
import {
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Tabs,
  TabPane,
  Breadcrumb,
  BreadcrumbItem
} from 'element-ui'

Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Footer)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

export default {
  data () {
    return {
      intervalId: null
    }
  },
  computed: {
    options () {
      return this.$store.state.tabs.options
    },
    activeIndex: {
      get () {
        return this.$store.state.tabs.activeIndex
      },
      set (val) {
        this.$store.commit('setActiveIndex', val)
      }
    }
  },
  mounted () {
    // 刷新时以当前路由做为tab加入tabs
    this.$store.commit('addTabs', {to: this.$route.path, name: this.$route.name})
    this.$store.commit('setActiveIndex', this.$route.path)
  },
  methods: {
    tabClick (tab, event) {
      this.$router.push({path: tab.name})
    },
    tabRemove (to) {
      this.$store.commit('deleteTabs', to)
      // 设置当前激活的路由
      if (this.options && this.options.length >= 1) {
        this.$store.commit('setActiveIndex', this.options[this.options.length - 1].to)
        this.$router.push({path: this.activeIndex})
      } else {
        this.$router.push({path: '/index'})
        this.$store.commit('setActiveIndex', '')
      }
    }
  },
  watch: {
    '$route': function (to) {
      let flag = false
      for (let key in this.options) {
        if (this.options[key].to === to.path) {
          flag = true
          this.$store.commit('setActiveIndex', to.path)
          break
        }
      }
      if (!flag) {
        this.$store.commit('addTabs', {to: to.path, name: to.name})
        this.$store.commit('setActiveIndex', to.path)
      }
    }
  },
  components: {
    LeftNav, TopHeader
  }
}
</script>

<style scoped lang="css">
  #app > .el-container {
    height: 100%;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #545c64;
    color: #333;
    line-height: 200px;
  }

  .el-main {
    background-color: #FFF;
    color: #333;
    min-width: 1000px;
  }

  .el-tabs--card {
    margin-bottom: 15px;
  }

  .el-tabs--card > .el-tabs__header {
    border-bottom: 1px solid #e4e7ed;
  }
</style>
